<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="title flex-between flex-align-items-center">
        <div class="title-fl">编辑</div>
        <CloseOutlined class="title-fr" @click="close" />
      </div>
      <a-config-provider :locale="zhCN">
        <a-form @finish="submit" :model="form">
          <div class="form-main">
            <a-form-item label="用户姓名" name="fullName" :rules="[{ required: true, message: '请输入用户姓名' }]">
              <a-input v-model:value="form.fullName" placeholder="请输入" maxlength="12"></a-input>
            </a-form-item>
            <a-form-item label="手机" name="phone" :rules="[{ required: true, message: '请输入手机' }]">
              <a-input v-model:value="form.phone" placeholder="请输入" maxlength="12"></a-input>
            </a-form-item>
            <a-form-item label="公司名称" name="companyName" :rules="[{ required: true, message: '请输入公司名称' }]">
              <a-input v-model:value="form.companyName" placeholder="请输入" maxlength="12"></a-input>
            </a-form-item>
            <a-form-item label="邮箱" name="mailbox" :rules="[{ required: true, message: '请输入邮箱' }]">
              <a-input v-model:value="form.mailbox" placeholder="请输入" maxlength="12"></a-input>
            </a-form-item>
            <a-form-item label="意向地区" name="intentArea" :rules="[{ required: true, message: '请输入意向地区' }]">
              <a-input v-model:value="form.intentArea" placeholder="请输入" maxlength="12"></a-input>
            </a-form-item>
            <a-form-item label="意向红人分类" name="cates" :rules="[{ required: true, message: '请选择意向红人分类' }]">
              <a-cascader v-model:value="form.cates" :options="cateList" placeholder="请选择" multiple />
            </a-form-item>
            <a-form-item label="会员开通人" name="openPerson" :rules="[{ required: true, message: '请输入会员开通人' }]">
              <a-input v-model:value="form.openPerson" placeholder="请输入" maxlength="12"></a-input>
            </a-form-item>
            <a-form-item label="会员等级" name="memberVersion" :rules="[{ required: true, message: '请选择会员等级' }]">
              <a-select placeholder="请选择" v-model:value="form.memberVersion">
                <a-select-option v-for="item in memberList" :key="item.value" :value="item.value">{{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item v-if="form.memberVersion !== 1" label="会员到期时间" name="expiryDate"
              :rules="[{ required: true, message: '请选择会员到期时间' }]">
              <a-date-picker v-model:value="form.expiryDate" placeholder="请选择" format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD" />
            </a-form-item>
          </div>
          <a-form-item class="form-btns">
            <div class="btns clear">
              <a-button type="primary" class="fr" html-type="submit" :loading="loading">确定</a-button>
              <a-button class="fr" @click="close">取消</a-button>
            </div>
          </a-form-item>
        </a-form>
      </a-config-provider>
    </div>
  </div>
</template>
<script setup>
import { defineEmits, ref, defineProps, onMounted } from "vue";
import zhCN from "ant-design-vue/lib/locale/zh_CN";
import { message } from "ant-design-vue";
import api from '@/api/index.js';
import {
  CloseOutlined
} from "@ant-design/icons-vue";

const props = defineProps(['info']);
const emit = defineEmits(['close', 'change']);

const memberList = [
  {
    label: '普通会员',
    value: 1
  },
  {
    label: '专业版',
    value: 2
  },
  {
    label: '高级专业版',
    value: 3
  },
  {
    label: '企业版',
    value: 4
  }
];

const loading = ref(false);
const cateList = ref([]);
const form = ref({});

const queryUserShow = () => {
  api.user.queryUserShow({
    userId: props.info.userId
  }).then(res => {
    form.value = {
      ...res,
      userId: res.id,
      memberVersion: res.memberVersion ? Number(res.memberVersion) : undefined,
      expiryDate: res.expiryDate ? res.expiryDate.split(' ')[0] : null
    }
    queryCateList();
  });
}
const queryCateList = () => {
  api.base.queryCateList().then(res => {
    cateList.value = res.map(item => {
      item.label = item.name;
      item.value = item.id;
      item.children = item.categories.map(item1 => {
        item1.label = item1.name;
        item1.value = item1.id;
        if (form.value.intentInfluencerCategory && form.value.intentInfluencerCategory.some(cate => cate.category_id === item1.id)) {
          form.value.cates.push([item.id, item1.id]);
        }
        return item1;
      });
      return item;
    });
  });
}
const close = () => {
  emit("close");
};
// 提交
const submit = () => {
  loading.value = true;
  api.user.updateUser({
    ...form.value,
    userId: form.value.id
  }).then(() => {
    loading.value = false;
    message.success('修改成功');
    emit("change");
  }).catch(err => {
    loading.value = false;
    message.error(err.msg);
  });
};

onMounted(() => {
  queryUserShow();
});
</script>
<style lang="less">
.popup {
  .main {
    width: 508px;
    border-radius: 8px;
    background: #fff;

    .title {
      height: 56px;
      padding: 0 24px;
      border-bottom: 1px solid #f0f0f0;

      .title-fl {
        font-size: 16px;
        color: #262626;
        font-weight: bold;
      }

      .title-fr {
        color: #bfbfbf;
        cursor: pointer;
      }
    }

    .ant-form {
      .form-main {
        padding: 32px 35px 38px;
      }

      .ant-form-item:last-child {
        margin-bottom: 0;
      }

      .ant-form-item-label {
        width: 110px;
      }

      .ant-form-item-control-input,
      .ant-picker {
        width: 328px;
      }

      .form-btns {
        margin-bottom: 0;

        .ant-form-item-control-input {
          width: 100%;
        }
      }
    }

    .btns {
      padding: 10px 24px;
      border-top: 1px solid #f0f0f0;

      .ant-btn {
        margin-left: 8px;
      }
    }
  }
}
</style>
